<template>
  <section>
    <el-card style="margin-bottom: 10px;" shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>实时交易趋势</span>
      </div>
      <el-row>
        <div style="width: 100%; height: 500px" id="chart"></div>
        <!-- <div v-else style="text-align: center; line-height: 100px;color: #909399;">暂无数据</div> -->
      </el-row>
    </el-card>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>实时交易信息</span>
      </div>

      <el-table :data="orders" max-height="300" border style="width: 100%">
        <el-table-column prop="saler_did" label="售电方数字身份" width="180"></el-table-column>
        <el-table-column prop="buyer_did" label="购电方数字身份" width="180"></el-table-column>
        <el-table-column prop="quantity" label="数量（度）"></el-table-column>
        <el-table-column label="价格（元）">
          <template slot-scope="scope">
            <span>{{ scope.row.priceYuan }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="交易时间">
          <template slot-scope="scope">
            <span>{{$fmtDate(scope.row.created_at)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="区块链交易ID">
          <template slot-scope="scope">
            <span @click="linkTo(scope.row)" class="linkTo">{{ scope.row.txid }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-row type="flex" justify="end">
      <Page
        @handleSizeChange="handleSizeChange"
        @handlePageChanged="handlePageChanged"
        :page.sync="pageNo"
        :pageView.sync="pageSize"
        :totalElements.sync="total"
      />
    </el-row>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";
import Echarts from "echarts";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected situationData: any = {
    starttime: null,
    endtime: null,
    tpno: null
  };
  protected orders: any = [
    // {
    //   offer_no: "of-130232",
    //   order_no: "od-220201",
    //   type: "p2p",
    //   quantity: 3200,
    //   price: 89,
    //   saler_did: "0x15235234",
    //   buyer_did: "0x5342342",
    //   txid: "0x1241234234",
    //   status: "done",
    //   created_at: 24124322
    // },
    // {
    //   offer_no: "of-23532",
    //   order_no: "od-89779",
    //   type: "p2p",
    //   quantity: 3200,
    //   price: 89,
    //   saler_did: "0x15235234",
    //   buyer_did: "0x5342342",
    //   txid: "0x1241234234",
    //   status: "done",
    //   created_at: 234235341
    // },
    // {
    //   offer_no: "of-98323",
    //   order_no: "od-23425",
    //   type: "central",
    //   quantity: 3200,
    //   price: 89,
    //   saler_did: "0x15235234",
    //   buyer_did: "0x5342342",
    //   txid: "0xab0234ae",
    //   status: "done",
    //   created_at: 43459923
    // }
  ];
  protected total: number = 0;
  protected pageNo: number = 1;
  protected pageSize: number = 10;

  protected linkTo(row: any) {
    this.$router.push({ path: "/blockDetail", query: row });
  }
  protected handlePageChanged(val: number) {
    this.pageNo = val;
    this.init();
  }
  protected handleSizeChange(val: number) {
    this.pageSize = val;
    this.pageNo = 1;
    this.init();
  }

  @Watch("situationData", { deep: true })
  protected async init() {
    const { starttime, endtime, tpno } = this.situationData;
    const params: any = {
      page_no: this.pageNo,
      page_size: 10
    };
    if (!tpno) {
      params.starttime = starttime;
      params.endtime = endtime;
    } else {
      params.tpno = tpno;
    }

    await this.$api.getOrdersQuery(params).then((response: any) => {
      const {
        data: {
          Orders,
          paginator: { page_no, page_size, total_count }
        }
      } = response;
      this.total = total_count;
      this.pageNo = page_no;
      const nameData: any = [];
      const links: any = [];
      if (Orders.length) {
        const obj: any = {};
        Orders.forEach((el: any) => {
          const price = "priceYuan";
          el[price] = Vue.prototype.$coinToYuan(el.price);
          const { buyer_did, saler_did, quantity, created_at } = el;
          if (!obj[buyer_did]) {
            obj[buyer_did] = null;
          }
          if (!obj[saler_did]) {
            obj[saler_did] = null;
          }
          links.push({
            source: buyer_did,
            target: saler_did,
            value: quantity,
            time: Vue.prototype.$fmtDate(created_at),
            show_price: el[price]
          });
        });

        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            nameData.push({
              name: key
            });
          }
        }
        this.orders = Orders;
      }
      this.$nextTick(() => {
        this.draw(nameData, links);
      });
    });
  }

  private draw(data: any, links: any) {
    const element: any = document.getElementById("chart");
    const myChart = Echarts.init(element);
    myChart.setOption({
      tooltip: {
        trigger: "item",
        triggerOn: "mousemove",
        formatter(params: any){
          console.log(params);
          const {name, data:{show_price, value, time, source, target}} = params
            return (
              source + '(购电方) -> ' +
              target + '(产销方)' +
              "<br/>" +
              "价格：" +
              show_price + '元' +
              "<br/>" +
              "电量：" +
              value + '度' +
              "<br/>" +
              "时间：" +
              time
            );
        }
      },
      series: [
        {
          type: "sankey",
          layout: "none",
          data,
          links
        }
      ]
    });
    myChart.dispatchAction({
      type: "mousemove"
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.linkTo {
  color: #077be8;
}
</style>


